<template>
    <div>
        <el-row>
            <el-col :span="22" id="selectdiv">

                <el-form :inline="true" :model="selectData" class="demo-form-inline">

                    <el-form-item label="评审类别" prop="classId">
                        <el-select v-model="selectData.classId" placeholder="请选择类别">
                            <el-option v-for="cls in classes" :key="cls.classId" :label="cls.className"
                                :value="cls.classId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="评分题目" label-position="left">
                        <el-input v-model="selectData.scName" placeholder="评分细则题目"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 80px;">
                        <el-button size="small" type="primary" @click="findByData">查询</el-button>
                    </el-form-item>
                    <el-form-item style="width: 80px;">
                        <el-button size="small" type="primary" @click="clear">清除</el-button>
                    </el-form-item>
                </el-form>

            </el-col>
            
        </el-row>
        <!-- 新增按钮 -->


        <!-- 表格展示 -->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%" border>
            <el-table-column prop="scId" label="评分标准id" width="100"></el-table-column>
            <el-table-column prop="classId" label="评分标准类别" width="100">
                <template slot-scope="scope" v-if="scope && classes[scope.row.classId-1]">
                    {{ classes[scope.row.classId-1].className }}
                </template>
            </el-table-column>
            <el-table-column label="评分标准题目" width="250">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top" width="300">
                        <p>题目: {{ scope.row.scName }}</p>
                        <p>内容: {{ scope.row.scContent }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag>{{ scope.row.scName }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="scWeight" label="评分标准权重"></el-table-column>
            
            <!-- 其他列... -->
        </el-table>
        
        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
        </el-pagination>


    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableHeight: window.innerHeight - 200,
                headers: { 'Content-Type': 'multipart/form-data' },
                dialogFormVisible: false,
                
                formLabelWidth: '120px',
                selectData: {
                    classId: '',
                    scName: '',
                },
                classes: [{
                    classId: '',
                    className: ''
                }
                ],
                tableData: []
                , // 表格数据
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示数量
                totalCount: 0, // 总记录数
                
                
               
                

            };
        },
        methods: {
            getHeight() {
                console.log("tableHeight:" + this.tableHeight);
                this.tableHeight = window.innerHeight - 200;
            },
            opendialog() {
                this.dialogFormVisible = true

            },
            resetForm() {
                this.$refs.editformData.resetFields();
                this.fetchData();
            },
            async fetchData() {
                // 获取后台数据，假设使用axios
                this.$axios({
                    method: 'get',
                    url: 'http://localhost:8080/class',

                }).then(res => {
                    if (res.data.code == 1) {
                        this.classes = res.data.data;

                    }

                })
                this.$axios({
                    method: 'post',
                    url: 'http://localhost:8080/scoringcriterion',
                    data: {
                        page: this.currentPage,
                        pageSize: this.pageSize,
                        classId: this.selectData.classId,
                        scName: this.selectData.scName
                    },
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    this.totalCount = res.data.data.total;
                    this.tableData = res.data.data.rows;


                })

            },
            
            findByData() {
                this.fetchData();
            },

            clear() {
                this.selectData.classId = '';
                this.selectData.scName = '';
                this.fetchData();
            },

           
            handleSizeChange(size) {
                this.pageSize = size;
                this.fetchData();
            },
            handleCurrentChange(page) {
                this.currentPage = page;
                this.fetchData();
            },
        },
        created() {
            window.addEventListener('resize', this.getHeight)
        },
        mounted() {
            this.fetchData();
            window.addEventListener('resize', this.getHeight)
        },
    };
</script>
<style lang="less">
    #selectdiv {
        .el-form-item {
            width: 40%;
            margin-right: 0;

            .el-form-item__content {
                line-height: 40px;
                position: relative;
                font-size: 14px;
                width: 140px;
            }
        }

    }

    #adddialog {
        .el-form-item {
            width: 70%;
            margin-right: 0;

            .el-form-item__content {
                line-height: 40px;
                width: 70%;
                font-size: 14px;
            }
        }

    }

    .parentBox {
        padding: 20px;
    }

    .iconBox i {
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        color: #8c939d;
        font-weight: bold;
        border: 1px #8c939d dashed;
        border-radius: 4px;
        background: rgb(251, 253, 255);
    }

    .iconBox i:hover {
        border: 1px rgb(64, 158, 255) dashed;
    }

    .el-image {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        border: 1px solid rgb(192, 204, 218);
    }

    .gbtpBox {
        position: relative;
    }

    .gbtpBox span {

        top: -110px;
        left: 90px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        background: rgb(245, 108, 108);
        color: #fff;
    }

    .gbtpBox span:hover {
        background: rgb(247, 137, 137);
        color: #fff;
    }

    ::v-deep .avatar-uploader {
        height: 0px;
    }
</style>